<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>调试效果演示</title>
    <style>
        .hover-box {
            width: 200px;
            height: 200px;
            background-color: #3498db;
            margin: 20px;
            transition: all 0.3s;
            cursor: pointer;
        }

        .hover-box:hover {
            background-color: #e74c3c;
            transform: scale(1.1);
        }

        /* 修改菜单样式 */
        .menu-wrapper {
            width: 200px;
            margin: 20px;
            position: relative;
        }

        .menu-input {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }

        .submenu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: #f1f1f1;
            border: 1px solid #ccc;
            border-top: none;
        }

        /* 使用focus触发显示 */
        .menu-input:focus+.submenu {
            display: block;
        }
    </style>
</head>

<body>
    <h3>调试效果的方法：</h3>
    <ol>
        <li>打开开发者工具 (F12)</li>
        <li>在Elements面板中找到要调试的元素</li>
        <li>右键元素 -> Break on -> attribute modifications</li>
    </ol>

    <h1>1. 悬停效果演示框</h1>

    <div class="hover-box">
        悬停效果演示框
    </div>

    <h1>2. 菜单效果演示框</h1>

    <div class="menu-wrapper">
        <input type="text" class="menu-input" placeholder="点击我触发focus效果">
        <div class="submenu">
            <div class="submenu-item">选项1</div>
            <div class="submenu-item">选项2</div>
            <div class="submenu-item">选项3</div>
        </div>
    </div>

    <script>
        // hover效果的事件监听
        document.querySelector('.hover-box').addEventListener('mouseenter', function (e) {
            this.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)';
        });

        document.querySelector('.hover-box').addEventListener('mouseleave', function (e) {
            this.style.boxShadow = 'none';
        });

        // focus效果的调试
        const input = document.querySelector('.menu-input');
    </script>

    <h4>调试技巧：</h4>
    <ul>
        <li>1. 使用Elements面板中的:hov按钮可以强制触发hover/focus状态</li>
        <li>2. 可以在Sources面板中给事件添加断点</li>
        <li>3. 使用DOM断点可以监控元素属性变化</li>
    </ul>
</body>

</html>